import Taro, { Config } from '@tarojs/taro'
import { Image, Text, View } from '@tarojs/components'
import './index.scss'
import classNames from 'classnames'
import { OSS } from "@/config/config"
import FyComponent from '@/components/common/touch'
import { toLiveInfoPage } from '@/utils/page_router'
import { ListEmpty, Loading, LoadMore } from '@/components/index'

const adList = [{"activeUrl":"//wq.jd.com/webportal/event/29835","imgUrl":"//img12.360buyimg.com/img/s420x420_jfs/t1/146783/21/11371/99383/5f8ef633Ebd6de452/f3fa775d590d3242.jpg","ptag":"138758.19.1","showTime":3,"type":"0"},{"activeUrl":"//wq.jd.com/webportal/event/28766","imgUrl":"//img12.360buyimg.com/img/s420x420_jfs/t1/150817/23/5385/47598/5fa28354E42ae6e86/c2134c2cbde4b25b.jpg","ptag":"138758.19.2","showTime":3,"type":"0"},{"activeUrl":"//wqs.jd.com/pglive/live_aggregation.html","imgUrl":"//img12.360buyimg.com/img/s420x420_jfs/t1/121394/15/15652/196752/5f8f0181E5ccb4edb/cb0acfab1b2b5e65.jpg","ptag":"138758.19.4","showTime":3,"type":"0"},{"activeUrl":"//wq.jd.com/webportal/event/29897","imgUrl":"//img12.360buyimg.com/img/s420x420_jfs/t1/144853/27/11602/192581/5f8f013eE4de24987/313b497981c83a45.jpg","ptag":"138758.19.5","showTime":3,"type":"0"}]
const dataList = [
  {
    "authorId":"642473",
    "broker_info":"",
    "delivery":"1",
    "desc":"",
    "detailWxLink":"",
    "h5Detail":"",
    "h5Pull":"https://jdpull.jd.com/live/2626017_fhd.m3u8",
    "hongbaoInfo":{
      "redBagType":1,
      "remainChanceNum":10,
      "robBeginTime":1604633914,
      "robEndTime":1604634814,
      "totalChanceNum":10,
      "total_amount":800
    },
    "id":"2626017",
    "indexImage":"https://m.360buyimg.com/livecms/jfs/t1/121923/8/16862/59512/5f9bcfd9Eb0be973b/dcd3b675b8b5290c.jpg!q70.jpg",
    "jdPull":"https://jdpull.jd.com/live/2626017_fhd.flv",
    "pageView":"48447",
    "pps":"jdzb.FO4O305:FOFODO50010:FOFO0F1051BO19O98O436O10067EFO001AO2811E12149B367FBF0BFA0",
    "publishTime":"1604581206000",
    "screen":"0",
    "shortTitle":"好物提前购",
    "skuList":[
      {
        "img":"https://m.360buyimg.com/mobilecms/jfs/t1/129042/11/17189/101896/5fa15c6dEea0ded3a/5b754fa08ceea9c8.jpg!q70.jpg",
        "price":"14.90",
        "sku":"10023204779876",
        "title":"【顺丰快递】金龙鱼高筋麦芯小麦粉2.5kg面粉适合各类面食制作家用包子饺子馒头饼手擀面面粉 高筋麦芯小麦粉5斤【普通快递】"
      },
      {
        "img":"https://m.360buyimg.com/mobilecms/jfs/t1/151384/11/4889/91282/5f9bbc4dE72e4625d/a5bec9d273bbc8c2.jpg!q70.jpg",
        "price":"16.90",
        "sku":"62305763358",
        "title":"海天 金标生抽 1.28L 阳光酿造 酱油 炒菜烧烤凉拌蘸水 中华老字号 海天金标生抽1.28L"
      }
    ],
    "status":1,
    "title":"预热11.11，好物提前购",
    "tuanInfo":{
      "begintime":1604633520,
      "bp":"5.80",
      "count":20,
      "endtime":1604678340,
      "have":7,
      "p":"16.90",
      "pgp":"5.90",
      "skuId":"10021168169796",
      "skuImage":"jfs/t1/146198/16/11580/221807/5f924889E6f072bce/b222b5a361982623.jpg",
      "skuName":"【百亿补贴】福建琯溪红心蜜柚 红心柚子 红肉蜜柚 红色柚子 非西柚 【京东速递】 1个红心蜜柚5斤超大果（净重4-4.5斤）",
      "tuanid":"9402de21ee9899f0174dd57c464b29143a08613a7b3caa77b517cc4dcb529b52"
    },
    "userName":"唐果果果ccc",
    "userPic":"https://m.360buyimg.com/ceco/jfs/t1/113822/24/9463/35188/5edb552aE7ca4773c/e8393cfbd59e24d3.jpg!q70.jpg"
  },
  {
    "authorId":"502679",
    "broker_info":"",
    "delivery":"1",
    "desc":"",
    "detailWxLink":"",
    "h5Detail":"",
    "h5Pull":"https://jdpull.jd.com/live/2669769_fhd.m3u8",
    "hongbaoInfo":{

    },
    "id":"2669769",
    "indexImage":"https://m.360buyimg.com/livecms/jfs/t1/121752/25/17234/79292/5fa0eeb3E58d53087/1bdb4d36a085d973.jpg!q70.jpg",
    "jdPull":"https://jdpull.jd.com/live/2669769_fhd.flv",
    "pageView":"50142",
    "pps":"jdzb.FO4O305:FOFODO50010:FOFO0F1051BO29O98O436O10067EFO001AO28BCC92149B367FBF0BFA0",
    "publishTime":"1604548800000",
    "screen":"0",
    "shortTitle":"好物补贴加倍",
    "skuList":[
      {
        "img":"https://m.360buyimg.com/mobilecms/jfs/t1/146198/16/11580/221807/5f924889E6f072bce/b222b5a361982623.jpg!q70.jpg",
        "price":"5.90",
        "sku":"10021168169796",
        "title":"【百亿补贴】福建琯溪红心蜜柚 红心柚子 红肉蜜柚 红色柚子 非西柚 【京东速递】 1个红心蜜柚5斤超大果（净重4-4.5斤）"
      },
      {
        "img":"https://m.360buyimg.com/mobilecms/jfs/t1/125116/20/7161/289682/5f0ff5c2Ee59e3c7c/88972964ebfefccc.jpg!q70.jpg",
        "price":"17.80",
        "sku":"70113779409",
        "title":"广古金标蚝油700g*2瓶家用蚝油炒菜凉拌烧烤火锅调味料 700g/瓶"
      }
    ],
    "status":1,
    "title":"补贴加倍 美食生活省省省",
    "tuanInfo":{
      "begintime":1604597040,
      "bp":"9.90",
      "count":50,
      "endtime":1604682000,
      "have":20,
      "p":"24.90",
      "pgp":"14.90",
      "skuId":"10023115861586",
      "skuImage":"jfs/t1/147885/7/10904/66652/5f895101E1d96369e/9386c390825c0d9c.jpg",
      "skuName":"金龙鱼 面条 手擀风味鸡蛋麦芯挂面 手工挂面炸酱面拌面拉面营养挂面 900g*2袋",
      "tuanid":"b0b4ddf364fdd58ee3745380d6b0a6f56fbe2eb136499953a3376a3e269024f6"
    },
    "userName":"京喜官方直播",
    "userPic":"https://m.360buyimg.com/mobilecms/jfs/t1/76944/2/10462/20772/5d808098Ea922ecd4/fc3bd1104085f30c.png"
  },
  {
    "authorId":"630696",
    "broker_info":"",
    "delivery":"1",
    "desc":"",
    "detailWxLink":"",
    "h5Detail":"",
    "h5Pull":"https://jdpull.jd.com/live/2594487_fhd.m3u8",
    "hongbaoInfo":{
      "redBagType":1,
      "remainChanceNum":10,
      "robBeginTime":1604634369,
      "robEndTime":1604635269,
      "totalChanceNum":10,
      "total_amount":800
    },
    "id":"2594487",
    "indexImage":"https://m.360buyimg.com/livecms/jfs/t1/142386/16/12437/330355/5f990440E5cafbc18/cf9d48ec72fd1d42.jpg!q70.jpg",
    "jdPull":"https://jdpull.jd.com/live/2594487_fhd.flv",
    "pageView":"315",
    "pps":"jdzb.FO4O305:FOFODO50010:FOFO0F1051BO39O98O436O10067EFO001AO2796B72149B367FBF0BFA0",
    "publishTime":"1604633400000",
    "screen":"0",
    "shortTitle":"大牌纸巾直降",
    "skuList":[
      {
        "img":"https://m.360buyimg.com/mobilecms/jfs/t1/115181/25/3152/241682/5ea67b85E5960ead2/8dedd1a6ca9aa90a.jpg!q70.jpg",
        "price":"12.90",
        "sku":"10023657694804",
        "title":"【工厂直供】洁柔卡通抽纸[3层100抽超值5包24包整箱]卫生纸无香餐巾纸面巾纸抽纸整箱 3层100抽8包（体验装）"
      },
      {
        "img":"https://m.360buyimg.com/mobilecms/jfs/t1/148049/8/9284/147047/5f6c5117E34556129/a3a062dd54f4ba5a.jpg!q70.jpg",
        "price":"24.20",
        "sku":"10022093335026",
        "title":"维达（Vinda）立体美棉韧抽纸巾100抽3层压花家用无香面巾纸 12包"
      }
    ],
    "status":1,
    "title":"大牌纸巾直降",
    "tuanInfo":{
      "begintime":1604633640,
      "bp":"24.90",
      "count":20,
      "endtime":1604637240,
      "have":0,
      "p":"45.90",
      "pgp":"25.90",
      "skuId":"68609967051",
      "skuImage":"jfs/t1/112757/36/3449/192411/5ea7c86aEc50734f1/90d352b5614ca658.jpg",
      "skuName":"【工厂直供】洁柔拼购厨房抽纸大号吸水吸油污厨房料理用纸【2层75抽12包/8包/2包】 8包",
      "tuanid":"5c233fbb3e2351baf97ea42aaee60affebb6796aa60ec3b79103f800ffff2cb4"
    },
    "userName":"公主丢了鞋",
    "userPic":"https://m.360buyimg.com/ceco/jfs/t1/88266/7/18159/148920/5e901383E302258b1/23865d2576ab8d2f.jpg!q70.jpg"
  },
  {
    "authorId":"657340",
    "broker_info":"",
    "delivery":"1,3,6",
    "desc":"拼购部分产品只需9.9元",
    "detailWxLink":"",
    "h5Detail":"",
    "h5Pull":"https://jdpull.jd.com/live/2701146_fhd.m3u8",
    "hongbaoInfo":{

    },
    "id":"2701146",
    "indexImage":"https://m.360buyimg.com/livecms/jfs/t1/123360/31/17778/237955/5fa49a09E31acf8f3/02da4409cce6f386.jpg!q70.jpg",
    "jdPull":"https://jdpull.jd.com/live/2701146_fhd.flv",
    "pageView":"493",
    "pps":"jdzb.FO4O305:FOFODO50010:FOFO0F1051BO49O98O436O10067EFO001AO29375A2149B367FBF0BFA0",
    "publishTime":"1604631600000",
    "screen":"0",
    "shortTitle":"水果直播专场",
    "skuList":[
      {
        "img":"https://m.360buyimg.com/mobilecms/jfs/t1/100833/30/14869/152635/5e688e0dEc283ba2c/26e736aa179afc21.jpg!q70.jpg",
        "price":"8.80",
        "sku":"66373388951",
        "title":"壹农壹果 四川安岳黄柠檬 酸爽可口 新鲜水果 坏果包赔 单果约70-90g 8枚装（单果约70-90g）"
      },
      {
        "img":"https://m.360buyimg.com/mobilecms/jfs/t1/128971/27/14863/59352/5f87c97bEb5c1dfaf/42b3dcf921b23ecd.jpg!q70.jpg",
        "price":"9.90",
        "sku":"10023045228404",
        "title":"壹农壹果 巧克力脆柿子 2斤 硬柿子 新鲜水果 产地直采"
      }
    ],
    "status":1,
    "title":"生鲜水果直播专场",
    "tuanInfo":{

    },
    "userName":"壹农壹果生鲜拼购旗舰店",
    "userPic":"https://m.360buyimg.com//popshop/jfs/t1/93092/39/9701/30006/5e119179E3f74cd41/30e97ac9fe25bd1c.jpg!q70.jpg"
  },
  {
    "authorId":"644673",
    "broker_info":"",
    "delivery":"1,8",
    "desc":"直播全场优惠高至35元",
    "detailWxLink":"",
    "h5Detail":"",
    "h5Pull":"https://jdpull.jd.com/live/2702770_fhd.m3u8",
    "hongbaoInfo":{
      "redBagType":1,
      "remainChanceNum":10,
      "robBeginTime":1604633179,
      "robEndTime":1604634079,
      "totalChanceNum":10,
      "total_amount":800
    },
    "id":"2702770",
    "indexImage":"https://m.360buyimg.com/livecms/jfs/t1/130800/37/15043/466876/5fa4b440E0109f320/4c8b66fd315e9471.jpg!q70.jpg",
    "jdPull":"https://jdpull.jd.com/live/2702770_fhd.flv",
    "pageView":"770",
    "pps":"jdzb.FO4O305:FOFODO50010:FOFO0F1051BO59O98O436O10067EFO001AO293DB22149B367FBF0BFA0",
    "publishTime":"1604631600000",
    "screen":"0",
    "shortTitle":"小巧音效震撼",
    "skuList":[
      {
        "img":"https://m.360buyimg.com/mobilecms/jfs/t1/131050/3/3892/81126/5f044552E9dbf8b7a/a788fd4be489f84b.jpg!q70.jpg",
        "price":"269.00",
        "sku":"71449822808",
        "title":"未蓝星 ANC主动降噪蓝牙耳机头戴式无线耳机跑步运动隔音耳麦游戏超重低音超长待机华为苹果安卓手机通用 尊贵黑：千元级降噪+影院音效"
      },
      {
        "img":"https://m.360buyimg.com/mobilecms/jfs/t1/127921/27/5279/216570/5eec7952E40730b28/c6b600d3f4ec6b80.jpg!q70.jpg",
        "price":"85.00",
        "sku":"70772998568",
        "title":"未蓝星 X1蓝牙音箱超重低音小钢炮音响家用无线迷你插卡户外便携式大音量手机电脑微信收款语音播报 黑色：大音量+震撼重低音+超长播放"
      }
    ],
    "status":1,
    "title":"时尚小巧音效震撼",
    "tuanInfo":{

    },
    "userName":"乐动数码拼购专营店",
    "userPic":"https://m.360buyimg.com//popshop/jfs/t1/117830/3/9066/30046/5ed628c7E94531695/57214378e2f81223.jpg!q70.jpg"
  },
  {
    "authorId":"654856",
    "broker_info":"",
    "delivery":"1,3",
    "desc":"全场折扣",
    "detailWxLink":"",
    "h5Detail":"",
    "h5Pull":"https://jdpull.jd.com/live/2697671_fhd.m3u8",
    "hongbaoInfo":{

    },
    "id":"2697671",
    "indexImage":"https://m.360buyimg.com/livecms/jfs/t1/135352/19/14858/316092/5fa3c3b1Edc7e03fd/8fbbe93299c0abaf.jpg!q70.jpg",
    "jdPull":"https://jdpull.jd.com/live/2697671_fhd.flv",
    "pageView":"54",
    "pps":"jdzb.FO4O305:FOFODO50010:FOFO0F1051BO69O98O436O10067EFO001AO2929C72149B367FBF0BFA0",
    "publishTime":"1604631600000",
    "screen":"0",
    "shortTitle":"茶叶回馈专场",
    "skuList":[
      {
        "img":"https://m.360buyimg.com/mobilecms/jfs/t1/149338/18/9204/165020/5f6c4b25E1f3ff964/07f07588c3393686.jpg!q70.jpg",
        "price":"149.50",
        "sku":"10021747202819",
        "title":"2020新茶飘雪茉莉花茶叶特级浓香型 四川蒙顶山飘雪花茶礼盒500g"
      },
      {
        "img":"https://m.360buyimg.com/mobilecms/jfs/t1/139825/20/11809/235450/5f952f68E3abb2b0d/69cfdb8800e04cd2.jpg!q70.jpg",
        "price":"149.50",
        "sku":"10023559270112",
        "title":"京东正宗金骏眉红茶叶浓香型礼盒装 2020新茶黄金芽茶叶正山小种红茶500g"
      }
    ],
    "status":1,
    "title":"2020年明前春茶",
    "tuanInfo":{

    },
    "userName":"安崃雅茶叶拼购店",
    "userPic":"https://m.360buyimg.com//popshop/jfs/t1/106588/30/12601/125168/5e4d3a50E4ad9cb3d/1b670887b197a49a.jpg!q70.jpg"
  },
  {
    "authorId":"648255",
    "broker_info":"",
    "delivery":"1,2,3",
    "desc":"",
    "detailWxLink":"",
    "h5Detail":"",
    "h5Pull":"https://jdpull.jd.com/live/2702996_fhd.m3u8",
    "hongbaoInfo":{

    },
    "id":"2702996",
    "indexImage":"https://m.360buyimg.com/livecms/jfs/t1/152306/3/4935/327600/5fa4b712E08e5a565/5422e1076e78481a.jpg!q70.jpg",
    "jdPull":"https://jdpull.jd.com/live/2702996_fhd.flv",
    "pageView":"482",
    "pps":"jdzb.FO4O305:FOFODO50010:FOFO0F1051BO79O98O436O10067EFO001AO293E942149B367FBF0BFA0",
    "publishTime":"1604631046000",
    "screen":"0",
    "shortTitle":"优选纯粮酱香",
    "skuList":[
      {
        "img":"https://m.360buyimg.com/mobilecms/jfs/t1/125554/13/1979/198216/5ec22e42E33777c30/c049ccd8d6132b33.jpg!q70.jpg",
        "price":"270.00",
        "sku":"10023611429425",
        "title":"贵州赤奉酒大师酱心53度酱香白酒纯粮食高粱酒窖藏坤沙酒15年陈酿2瓶 2瓶"
      },
      {
        "img":"https://m.360buyimg.com/mobilecms/jfs/t1/113367/33/6949/111110/5ebf7e3eE2bcfe279/1a398820bc0ec6dd.jpg!q70.jpg",
        "price":"29.80",
        "sku":"10022722827586",
        "title":"贵州赤奉125MLX2小瓶品鉴酒酱香白酒10年纯粮食老酒 茅台镇酒厂直供 特惠 2瓶装"
      }
    ],
    "status":1,
    "title":"赤奉优选纯粮酱香",
    "tuanInfo":{

    },
    "userName":"赤奉白酒拼购旗舰店",
    "userPic":"https://m.360buyimg.com//popshop/jfs/t1/111355/22/7728/35830/5ec510daE6c728944/f456eb92612c2afc.jpg!q70.jpg"
  },
  {
    "authorId":"593621",
    "broker_info":"",
    "delivery":"1,2,3",
    "desc":"",
    "detailWxLink":"",
    "h5Detail":"",
    "h5Pull":"https://jdpull.jd.com/live/2696078_fhd.m3u8",
    "hongbaoInfo":{

    },
    "id":"2696078",
    "indexImage":"https://m.360buyimg.com/live/jfs/t1/147026/32/13227/74800/5fa3af0fEa393880b/7ea5832be2ad8790.jpg!q70.jpg",
    "jdPull":"https://jdpull.jd.com/live/2696078_fhd.flv",
    "pageView":"651",
    "pps":"jdzb.FO4O305:FOFODO50010:FOFO0F1051BO89O98O436O10067EFO001AO29238E2149B367FBF0BFA0",
    "publishTime":"1604631000000",
    "screen":"0",
    "shortTitle":"美女带货",
    "skuList":[

    ],
    "status":1,
    "title":"新疆特产 美女带货",
    "tuanInfo":{

    },
    "userName":"枣卜卜食品拼购旗舰店",
    "userPic":"https://m.360buyimg.com//popshop/jfs/t1/110417/11/7884/29343/5e60a6b9Ec87dd9eb/4e64cbd14f9834dd.jpg!q70.jpg"
  },
  {
    "authorId":"399267",
    "broker_info":"",
    "delivery":"1",
    "desc":"",
    "detailWxLink":"",
    "h5Detail":"",
    "h5Pull":"https://jdpull.jd.com/live/2702831_fhd.m3u8",
    "hongbaoInfo":{

    },
    "id":"2702831",
    "indexImage":"https://m.360buyimg.com/livecms/jfs/t1/123330/32/17750/439528/5fa4b489E5fb09523/b5f278349ad46880.jpg!q70.jpg",
    "jdPull":"https://jdpull.jd.com/live/2702831_fhd.flv",
    "pageView":"57368",
    "pps":"jdzb.FO4O305:FOFODO50010:FOFO0F1051BO99O98O436O10067EFO001AO293DEF2149B367FBF0BFA0",
    "publishTime":"1604631000000",
    "screen":"0",
    "shortTitle":"优品实惠购",
    "skuList":[
      {
        "img":"https://m.360buyimg.com/mobilecms/jfs/t1/140544/24/12751/74379/5f9bdd7bE6bfcb86e/4720c3ead8f82db8.jpg!q70.jpg",
        "price":"149.00",
        "sku":"100011201394",
        "title":"美加净 眼霜 淡化细纹  电动 眼霜女 舒缓眼周按摩神器"
      },
      {
        "img":"https://m.360buyimg.com/mobilecms/jfs/t1/149228/19/13390/112620/5fa4a0dfEb9cca97a/6683073aab88aa8f.jpg!q70.jpg",
        "price":"29.50",
        "sku":"2174805",
        "title":"美加净（MAXAM）时刻护手保湿滋养护手霜175ml（双手喝饱水）"
      }
    ],
    "status":1,
    "title":"11.11护肤优品实惠购",
    "tuanInfo":{

    },
    "userName":"小思玉",
    "userPic":"https://m.360buyimg.com/ceco/jfs/t1/143924/21/575/76796/5ee4a1e2Ee91246b3/1b315060cb7d43b2.jpg!q70.jpg"
  },
  {
    "authorId":"623473",
    "broker_info":"",
    "delivery":"1,4,6",
    "desc":"",
    "detailWxLink":"",
    "h5Detail":"",
    "h5Pull":"https://jdpull.jd.com/live/2702365_fhd.m3u8",
    "hongbaoInfo":{

    },
    "id":"2702365",
    "indexImage":"https://m.360buyimg.com/live/jfs/t1/149554/33/13427/96107/5fa4ae39E588aedfe/0701b73b339edd9a.jpg!q70.jpg",
    "jdPull":"https://jdpull.jd.com/live/2702365_fhd.flv",
    "pageView":"443",
    "pps":"jdzb.FO4O305:FOFODO50010:FOFO0F1051BOA9O98O436O10067EFO001AO293C1D2149B367FBF0BFA0",
    "publishTime":"1604630400000",
    "screen":"0",
    "shortTitle":"新品上架",
    "skuList":[
      {
        "img":"https://m.360buyimg.com/mobilecms/jfs/t1/106479/14/8129/109499/5e009e57E99cfa6e9/4335beddc34ced92.jpg!q70.jpg",
        "price":"23.80",
        "sku":"64459114928",
        "title":"电热毯单人双人学生宿舍家用双控定时断电1.8加大220V 电褥子 单人单控长1.5米*宽0.7米+ 绒面【款】"
      },
      {
        "img":"https://m.360buyimg.com/mobilecms/jfs/t1/92599/36/7898/145890/5e009df0E573f9550/de5c0b184b6842fd.jpg!q70.jpg",
        "price":"37.29",
        "sku":"64459009399",
        "title":"电热毯水暖毯双人水循环加热恒温水暖床垫家用加大三人水电褥子单 水暖单人单控【长1.5x宽0.7米"
      }
    ],
    "status":1,
    "title":"直播间羽绒被新品上架",
    "tuanInfo":{

    },
    "userName":"嫐嫐家纺拼购店",
    "userPic":"https://m.360buyimg.com//popshop/jfs/t1/89146/27/5697/96682/5dee8ea9Ec0c45f27/5d9e7442075d307d.png"
  }
]

//  获取单位
const getUnit = (number, unit) => {
  return (number > 10000 ? `${Number((number / 10000).toFixed(1))}万${unit}`: `${number}${unit}`)
}

//  计算偏移量
const getTX = (key, cur) => {
  const number = key - cur
  const abs = Math.abs(number)
  const num = cur > divide ? (abs > divide ? adLength - cur + key : number) : (abs > adLength - divide ? -(adLength - key + cur) : number)
  return num * 440
}

//  根据当前位置计算其他位置
const addCurrent = (cur, num) => {
  const sum = cur + num
  return sum >= adLength ? sum - adLength : (sum < 0 ? adLength + sum : sum)
}

let adLength = adList.length
let divide = adLength % 2 === 0 ? (adLength - 1) / 2 : Math.floor(adLength / 2)
export default class Index extends FyComponent {
  state: any
  timer: any

  config: Config = {
    backgroundColor: process.env.backgroundColor,
    backgroundTextStyle: "dark",
    enablePullDownRefresh: true,
    navigationBarTitleText: '直播列表',
    navigationBarTextStyle: process.env.navigationBarTextStyle,
    navigationBarBackgroundColor: process.env.backgroundColor
  }

  constructor() {
    super()
    this.timer = undefined
    this.state = {
      page: 1,
      limit: 10,
      current: 0,
      loading: false,
      liveList: [],
      loadStatus: 'loading',
    }
  }

  componentDidShow() {
    this.setTimer()
  }

  componentDidHide() {
    this.clearTimer()
  }

  componentDidMount () {
    this.getPage()
    this.setTimer()
  }

  componentWillUnmount() {
    this.clearTimer()
  }

  //  下拉刷新
  onPullDownRefresh() {
    this.setState({
      page: 1,
      loadStatus: 'loading'
    }, () => {
      this.getPage()
    })
  }

  //  下拉加载
  onReachBottom() {
    this.getPage()
  }

  onTouchLeft() {
    this.clearTimer()
    const { current } = this.state
    this.setState({
      current: addCurrent(current, 1)
    })
    setTimeout(() => {
      this.setTimer()
    }, 500)
  }

  onTouchRight() {
    this.clearTimer()
    const { current } = this.state
    this.setState({
      current: addCurrent(current, -1)
    })
    setTimeout(() => {
      this.setTimer()
    }, 500)
  }

  setTimer() {
    if (!this.timer) {
      this.timer = setInterval(() => {
        const { current } = this.state
        const length = adList.length - 1
        this.setState({
          current: current < length ? current + 1 : 0
        })
      }, 5000)
    }
  }

  clearTimer() {
    if (this.timer) {
      clearInterval(this.timer as number)
      this.timer = undefined
    }
  }

  //  分页获取店铺
  getPage() {
    const { page, limit, liveList, loadStatus } = this.state
    if (loadStatus === 'noMore') {
      return
    }

    setTimeout(() => {
      const totalCount = 20
      this.setState({
        page: page + 1,
        liveList: page === 1 ? dataList : liveList.concat(dataList),
        loadStatus: (page * limit >= totalCount) ? 'noMore' : 'loading'
      }, () => {
        this.setState({
          loading: false
        })
        Taro.stopPullDownRefresh()
      })
    }, 1500)
  }

  render () {
    const { current, loading, liveList, loadStatus } = this.state

    // @ts-ignore
    return (<View className='page xf-page' style={{ '--bg-image': `url(${OSS}/system/image/shop_list_bg.png)` }}>
      {loading && <Loading isCover/>}
      <View className='carousel'>
        <View className='carousel-list' onTouchStart={this.onTouchStart.bind(this)} onTouchMove={this.onTouchMove.bind(this)} onTouchEnd={this.onTouchEnd.bind(this)}>
          {
            adList.map((ad, key) => {
              return (
                <View key={key} className='carousel-item' style={{
                  visibility: [current, addCurrent(current, -1), addCurrent(current, +1)].indexOf(key) >= 0 ? 'visible' : 'hidden',
                  transform: `translateX(${getTX(key, current)}rpx) scale(${current === key ? 1 : 0.85})`,
                  transformOrigin: `0px 50%;`,
                  transitionDuration: `0.2s`,
                }}>
                  {/*<Image src={`https:${ad.imgUrl}`}/>*/}
                  <img src={`https:${ad.imgUrl}`}/>
                </View>
              )
            })
          }
        </View>
        <View className='carousel-dot'>
          {adList.map((_dot, key) => {
            return (<View key={key} className={classNames(`carousel-dot-item`, { ['active']: current === key })}/>)
          })}
        </View>
      </View>

      <View className='live-list'>
        {liveList.map((item, key) => {
          return (
            <View key={item.id} className='live-item' onClick={() => toLiveInfoPage(key)}>
              <View className='live-left'>
                <img src={item.indexImage} className='live-img'/>
                {/*<Image src={item.indexImage} className='live-img'/>*/}
                <View className='live-tag'>
                  <View className='live-tag-tag'>直播中</View>
                  <View className='live-tag-watch'>{getUnit(item.pageView, '人')}观看</View>
                </View>
                <View className='live-user'>
                  <img src={item.userPic} className='live-user-avatar'/>
                  {/*<Image src={item.userPic} className='live-user-avatar'/>*/}
                  <Text className='live-user-name'>{item.userName}</Text>
                </View>
              </View>
              <View className='live-right'>
                <View className='live-box'>
                  <View className='live-title t-o-e-2'>{item.title}</View>
                  <View className='live-short-Title t-o-e'>{item.shortTitle}</View>
                </View>

                <View className='live-goods'>
                  {
                    item.skuList.map((goods, key) => {
                      return (
                        <View key={key} className='live-goods-item'>
                          {/*<Image src={goods.img}/>*/}
                          <img src={goods.img}/>
                          <View className='live-goods-price f-g-5'>￥{goods.price}</View>
                        </View>
                      )
                    })
                  }
                </View>
              </View>
            </View>
          )
        })}
      </View>

      {/*{!liveList.length && loadStatus == 'noMore' ? (<ListEmpty/>) : (<LoadMore status={loadStatus}/>)}*/}
    </View>)
  }
}
